<template>
          <div id="left">
            <div class="media user-media bg-dark dker">
                <div class="user-media-toggleHover">
                    <span class="fa fa-user"></span>
                </div>
                <div class="user-wrapper bg-dark">
                    <a class="user-link" href="">
                        <img class="media-object img-thumbnail user-img rounded-circle admin_img3" alt="User Picture"
                             src="../assets/img/admin.jpg">
                        <p class="text-white user-info">Welcome Micheal</p>
                    </a>
                    <div class="search_bar col-lg-12">
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="search">
                            <span class="input-group-btn">
<button class="btn without_border" type="button"><span class="fa fa-search">
</span></button>
</span> 
                        </div>
                    </div>
                </div>
            </div>
            <!-- #menu -->
            <ul id="menu" class="bg-blue dker">
                <li>
                     <router-link   to="/classifymanage">
                        <i class="fa fa-home"></i>
                        <span class="link-title">&nbsp;分类管理</span>
                    </router-link>
                </li>
                <li>
                     <a href="#">
                        <i class="fa fa-anchor"></i>
                        <span class="link-title">&nbsp; 档案管理</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <router-link  to="/components/general">
                                <i class="fa fa-angle-right"></i> &nbsp; 门类管理
                             </router-link>
                        </li>
                        <li>
                           <router-link  to="/components/transitionsl">
                                <i class="fa fa-angle-right"></i> &nbsp;窗体模型
                           </router-link>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 用户管理
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;l">
                                <i class="fa fa-angle-right"></i> &nbsp; 数据字典
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>&nbsp; 数据表定义
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 菜单设置
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 系统参数
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 操作日志
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 全局报表
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                                &nbsp; 组织结构
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                                &nbsp; 职务管理
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 人员管理
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 借阅管理
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 借阅管理
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 统计
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-th-large"></i>
                        <span class="link-title">&nbsp; 门类管理</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>  <router-link  to="/charts/bar"> 
                                <i class="fa fa-angle-right"></i>
                                &nbsp; 职务管理
                              </router-link>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                                &nbsp; 人员管理
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-pencil"></i>
                        <span class="link-title">&nbsp; 档案统计</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <router-link  to="/basetable">
                        
                                <i class="fa fa-angle-right"></i> &nbsp; 兰台信息技术
                            </router-link> 
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 福州科技
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 广大银行
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 定远科技
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 钱包生活
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 阿里巴巴
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 金融同台
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 远程科技
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-th"></i>
                        <span class="link-title">&nbsp; 窗体模型</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 主菜单
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                                &nbsp; 项目合同
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 政府批文
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 其他
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-bar-chart"></i>
                        <span class="link-title">&nbsp; 用户管理</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 用户信息
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 考勤
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 休假
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 异常申请
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-user"></i>
                        <span class="link-title">&nbsp; 数据字典</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 2015数据
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016数据
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 2017数据
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 2018数据
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-calendar"></i>
                        <span class="link-title">&nbsp; 数据表定义</span>
                        <span class="badge badge-pill badge-primary float-right calendar_badge">7</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-picture-o"> </i> &nbsp; 菜单设置
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-envelope-o"></i>
                        <span class="link-title">&nbsp; 角色管理</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="mail_compose.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 部门管理
                            </a>
                        </li>
                        <li>
                            <a href="mail_inbox.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 级别查询
                            </a>
                        </li>
                        <li>
                            <a href="mail_view.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 业绩
                            </a>
                        </li>
                        <li>
                            <a href="mail_sent.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 项目负责
                            </a>
                        </li>
                        <li>
                            <a href="mail_spam.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 产品经理
                                
                            </a>
                        </li>
                        <li>
                            <a href="mail_draft.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 测试部门
                            </a>
                        </li>
                        <li>
                            <a href="mail_trash.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 后端开发
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-map-marker"></i>
                        <span class="link-title">&nbsp; 系统参数</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="maps.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 数据分析
                            </a>
                        </li>
                        <li>
                            <a href="jqvmaps.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 年度统计
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-file"></i>
                        <span class="link-title">&nbsp; 操作日志</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="404.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 登录
                            </a>
                        </li>
                        <li>
                            <a href="500.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 注册
                            </a>
                        </li>
                        <li>
                            <a href="login.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 删除
                            </a>
                        </li>
                        <li>
                            <a href="register.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 更改
                            </a>
                        </li>
                        <li>
                            <a href="lockscreen.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 查询
                            </a>
                        </li>
                        <li>
                            <a href="invoice.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 增加
                            </a>
                        </li>
                        <li>
                            <a href="blank.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 打印
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a href="javascript:;">
                        <i class="fa fa-th"></i>
                        <span class="link-title">&nbsp; 全局报表</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul>
                        <li>
                            <a href="boxed.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年1季度
                            </a>
                        </li>
                        <li>
                            <a href="fixed-header-boxed.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年1季度
                            </a>
                        </li>
                        <li>
                            <a href="fixed-header-menu.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年1季度
                            </a>
                        </li>
                        <li>
                            <a href="fixed-header.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年2季度
                            </a>
                        </li>
                        <li>
                            <a href="fixed-menu-boxed.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年3季度
                            </a>
                        </li>
                        <li>
                            <a href="fixed-menu.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2016年4季度
                            </a>
                        </li>
                        <li>
                            <a href="no-header.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2017年1季度
                            </a>
                        </li>
                        <li>
                            <a href="no-left-sidebar.html">
                                <i class="fa fa-angle-right"></i> &nbsp; 2017年2季度
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-sitemap"></i>
                        <span class="link-title">&nbsp;  全文路径管理</span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp;一级数据
                                <span class="fa arrow"></span>
                            </a>
                            <ul class="sub-menu sub-submenu">
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                        <span class="fa arrow"></span>
                                    </a>
                                    <ul class="sub-menu sub-submenu">
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-angle-right"></i> &nbsp;三级 3
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-angle-right"></i> &nbsp;三级 3
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-angle-right"></i> &nbsp;三级 3
                                                <span class="fa arrow"></span>
                                            </a>
                                            <ul class="sub-menu sub-submenu">
                                                <li>
                                                    <a href="javascript:;">
                                                        <i class="fa fa-angle-right"></i> &nbsp;四级 4
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <i class="fa fa-angle-right"></i> &nbsp;四级 4
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <i class="fa fa-angle-right"></i> &nbsp;四级 4
                                                        <span class="fa arrow"></span>
                                                    </a>
                                                    <ul class="sub-menu sub-submenu">
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-angle-right"></i> &nbsp;五级 5
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-angle-right"></i> &nbsp;五级 5
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-angle-right"></i> &nbsp;五级 5
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-angle-right"></i> &nbsp;四级 4
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp; 一级数据
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i> &nbsp;一级数据
                                <span class="fa arrow"></span>
                            </a>
                            <ul class="sub-menu sub-submenu">
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-angle-right"></i> &nbsp;二级 数据
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- /#menu -->
        </div>
        <!-- /#left -->

</template>
<script>
export default {
 data() {
    return {
      systemList: [
        "全宗管理",
        "分类管理",
        "门类管理",
        "窗体模型",
        "用户管理",
        "数据字典",
        "数据表定义",
        "菜单设置",
        "角色管理",
         "系统参数",
        "操作日志",
        "全局报表",
        "全文路径管理",
        "档案统计",
        "组织结构",
         "职务管理",
        "人员管理",
        "借阅管理",
         "桌面整理",
        "统计",
        "组织结构",
         "职务管理",
        "人员管理",
        "借阅管理",
         "桌面整理",
        "统计"
      ],
       granttList: [
        "订单1",
        "订单10",
        "订单12",
        "订单12",
        "订单14",
        "订单15",
        "订单51",
        "订单61",
        "订单71",
        "订单61",
        "订单61",
        "订单19"
        ],
        currentList:[],
        types:""

}

 },
 created:function(){
   this.checkType();
 },
 methods:{
   checkType(){
    var that = this;
    var type = that.$route.query.type;
    that.types =  type;
  
  console.log("类型",type);
  switch(type){
    case "system": {
      that.currentList = that.systemList;
      break;
    }

     case "grant": {
       that.currentList = that.granttList;
       break;
     }
  }

   }
 },
 watch:{
   "$route":function(){
     this.checkType();
 
   }
 } 
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
//   .my-list{
//       width:100%;
//       height:100%;
//       background:rgba(204, 204, 204, 0.418);
//       overflow: scroll;
//       ul {
//             width:100%;  
//         li{
//           width:100%;
//           padding: 5px 0 5px 10%;
//           margin-bottom:10px;
//           background:rgb(179, 232, 245);
           
//         }
//       }
    
//     }

</style>